<template>
  <div class="goods-detail">
    <form-view
      class="task-tab-container task-view-containner tab-container bbx-cell-form-view"
      :fields="fields"
      :value="value"
      :form-cell-count="formCellCount"
    >
      <div class="main-name" slot="commodityName">
        {{ value.commodityName }}
      </div>

      <!-- 服务项目/备件编号 -->
      <template slot="originCode" slot-scope="{ field }">
        <div class="form-view-row bbx-form-cell-item">
          <label>{{ $t('goods.component.nameNo', {name: name}) }}</label>
          <div class="form-view-row-content">{{ value.originCode }}</div>
        </div>
      </template>

      <!-- 服务项目/备件名称 -->
      <template slot="originName" slot-scope="{ field }">
        <div class="form-view-row bbx-form-cell-item">
          <label>{{ $t('goods.component.name', {name: name}) }}</label>
          <div class="form-view-row-content">{{ value.originName }}</div>
        </div>
      </template>

      <!-- 关联产品类型 -->
      <template slot="productTypeList" slot-scope="{ field }">
        <div class="form-view-row bbx-form-cell-item">
          <label>{{ field.displayName }}</label>
          <div class="form-view-row-content">
            <div
              :key="item.id"
              v-for="item in value.productTypeList"
              style="margin-bottom: 6px"
            >
              <span
                class="form-product"
                @click="handleOpenGoodsMenuTab(item.id)"
              >
                {{ item.pathName }}
              </span>
            </div>
          </div>
        </div>
      </template>

      <!-- 创建人 -->
      <template slot="displayName" slot-scope="{ field }">
        <div class="form-view-row bbx-form-cell-item">
          <label>{{ field.displayName }}</label>
          <div class="form-view-row-content">{{ value.displayName }}</div>
        </div>
      </template>

      <!-- 外部购买链接 -->
      <template slot="purchaseLink" slot-scope="{ field }">
        <div class="form-view-row bbx-form-cell-item">
          <label>{{ field.displayName }}</label>
          <div class="form-view-row-content">
            <span
              class="form-link"
              @click="handleOpenExternalLink"
              v-if="value.purchaseLink"
            >
              {{ value.purchaseLink }}
            </span>
          </div>
        </div>
      </template>

      <!-- 商品状态 -->
      <template slot="putawayStatus" slot-scope="{ field }">
        <div class="form-view-row bbx-form-cell-item">
          <label>{{ field.displayName }}</label>
          <div class="form-view-row-content">
            <span
              v-if="typeof value.putawayStatus === 'number'"
              :class="[
                'form-tag',
                value.putawayStatus === 0 ? 'gray-state' : '',
              ]"
            >
              {{ value.putawayStatus === 0 ? $t('goods.component.offShelf') : $t('goods.component.onShelf') }}
            </span>
          </div>
        </div>
      </template>

      <!-- 价格 -->
      <template slot="price" v-if="!value.hasSpecs" slot-scope="{ field }">
        <div class="form-view-row bbx-form-cell-item">
          <label>{{ field.displayName }}</label>
          <div class="form-view-row-content">
            {{ priceStr }}
          </div>
        </div>
      </template>

      <template slot="specsPrice" v-if="value.hasSpecs" slot-scope="{ field }">
        <div class="form-view-row bbx-form-cell-item">
          <label>{{ field.displayName }}</label>
          <div class="form-view-row-content">
            {{ spescPrice}}
          </div>
        </div>
      </template>

      <!-- 服务方式 -->
      <template slot="serviceType" slot-scope="{ field }">
        <div class="form-view-row bbx-form-cell-item">
          <label>{{ field.displayName }}</label>
          <div class="form-view-row-content">{{ serviceTypeStr }}</div>
        </div>
      </template>

      <!-- 运费 -->
      <template slot="expressCost" slot-scope="{ field }">
        <div class="form-view-row bbx-form-cell-item">
          <label>{{ field.displayName }}</label>
          <div class="form-view-row-content">{{ Money(value.expressCost) }}</div>
        </div>
      </template>

      <!-- 上门服务费 -->
      <template slot="serviceCost" slot-scope="{ field }">
        <div class="form-view-row bbx-form-cell-item">
          <label>{{ field.displayName }}</label>
          <div class="form-view-row-content">{{ Money(value.serviceCost) }}</div>
        </div>
      </template>

      <!-- 是否支持客户预约上门时间 -->
      <template slot="isAppointmentSupported" slot-scope="{ field }">
        <div class="form-view-row bbx-form-cell-item">
          <label>{{ field.displayName }}</label>
          <div class="form-view-row-content">{{ value.isAppointmentSupported === 1 ? $t('common.base.yes') : $t('common.base.no') }}</div>
        </div>
      </template>

      <template slot="standardDesc" slot-scope="{ field }">
        <div v-if="value.hasSpecs">
          <div class="form-view-row bbx-form-cell-item">
            <label>{{ $t('goods.component.productSpecifications') }}</label>
            <div class="form-view-row-content">{{ value.specsDesc }}</div>
          </div>
          <div class="form-view-row stand-desc">
            <div>
              <label>{{ $t('goods.component.specsDetails') }}</label>
            </div>
            <el-table :data="pageData" border style="margin-top: 12px" header-row-class-name="common-list-table-header__v2">
              <el-table-column
                v-for="(column, index) in value.specifications"
                :key="`${index}_index`"
                :label="column.name"
                :prop="column.fieldName"
                show-overflow-tooltip
                :minWidth="column.minWidth || 'auto'"
              >
                <template slot-scope="scope">
                  <span v-if="columnArr.includes(column.fieldName)">{{ scope.row[column.fieldName] }}</span>
                  <span v-else>{{ scope.row[column.name] }}</span>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              layout="prev, pager, next"
              background
              :current-page="currentPage"
              :page-size="10"
              :total="total"
              @current-change="changePage">
            </el-pagination>
          </div>
        </div>
        <div v-else class="form-view-row bbx-form-cell-item">
          <label>{{ $t('goods.component.specificationDesc') }}</label>
          <div class="form-view-row-content">{{ value.standard }}</div>
        </div>
      </template>
    </form-view>
  </div>
</template>

<script>
import { openAccurateTab } from '@src/util/platform';
import { PageRoutesTypeEnum } from '@model/enum/PageRoutesEnum';
import { Money } from 'src/util/format/number.ts'
export default {
  // 兼容内部有组件使用到inject报错
  provide: {
    initData: {},
  },
  props: {
    fields: {
      type: Array,
      default: () => [],
    },
    value: {
      type: Object,
      default: () => ({}),
    },
    formCellCount: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      columnArr: ['serialNumber', 'salePrice', 'inventory'],
      currentPage: 1,
      pageData: []
    }
  },
  computed: {
    name() {
      return this.value.originType === 1
        ? this.$t('common.base.sparePart')
        : this.value.originType === 2
        ? this.$t('common.label.serviceItem')
        : this.$t('common.pageTitle.pageItemsDetail');
    },
    serviceTypeStr() {
      if (this.value?.serviceType === 1) {
        return this.$t('goods.component.expressDelivery');
      } else if (this.value?.serviceType === 2) {
        return this.$t('task.setting.taskTypeSetting.manage.industryNames.name7');
      } else if (this.value?.serviceType === 3) {
        return this.$t('goods.component.serviceMethod');
      }

      return '';
    },
    priceStr() {
      const price =
        this.value.priceType === 1 ? this.value.originPrice : this.value.price;

      return price ? Money(price) : 0;
    },
    spescPrice() {
      let arr =  this.value?.specsList?.map(item => item?.salePrice) || []
      let min = 0
      let max = 0
      if(arr.length) {
        min = Math.min(...arr)
        max = Math.max(...arr)
      }
      let str = `${min}~${max}`
      return str
    },
    total(){
      return this.value.specsList.length
    }
  },
  methods: {
    Money,
    changePage(val) {
      this.pageData = this.value.specsList.slice((val-1)*10, val*10)
    },
    handleOpenGoodsMenuTab(id) {
      if (!id) return;

      let fromId = window.frameElement.getAttribute('id');

      openAccurateTab({
        type: PageRoutesTypeEnum.PageProductV2CatalogView,
        key: id,
        params: `id=${id}`,
        fromId,
      });
    },
    handleOpenExternalLink() {
      const url = this.value.purchaseLink;
      if (!url) return;

      return this.$platform.openLink(url);
    },
  },
  watch: {
    value: {
      handler(val) {
        this.pageData = (val?.specsList ||  []).slice(0,10) || []
      },
      deep: true
    },
  }
};
</script>

<style lang="scss" scoped>
.goods-detail {
  .tab-container {
    padding: 10px 0 100px;
  }

  .main-name {
    padding: 16px 0 4px 16px;
    font-size: 14px;
    font-weight: bold;
    color: #262626;
    width: 100%;
  }

  ::v-deep .form-view-row {
    padding: 8px 20px;
  }

  .form-link {
    color: $color-primary;

    cursor: pointer;
  }

  .form-product {
    cursor: pointer;
    color: $color-primary;

  }

  .form-tag {
    display: block;
    width: 52px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    background: #00c853;
    border-radius: 11px;
    font-size: 12px;
    color: #fff;
  }

  .gray-state {
    background: #bdbdbd;
  }
}
.stand-desc {
  display: inline-block
}
</style>
